<template>
    <div class="left-article article-item">
        <div class="top-left-img">
            <img :src="article.article_cover" class="img">
        </div>
        <div class="conttent">
            <div class="main-content-text">
                <div class="title">
                    {{ article.article_title }}
                </div>
                <div class="describtion">
                    {{ article.article_description }}
                </div>
                <h1 class="content-top">
                    <span v-if="article.article_istop"><i class="iconfont icon-icon-"></i>置顶</span>
                    <span><i class="iconfont icon-icon"></i>点赞 {{ article.articlee_strs }}</span>
                    <span><i class="iconfont icon-Icon-guankanliang"></i>观看
                        {{ article.article_viewtime }}</span>
                    <span><i class="iconfont icon-calendar2">
                            {{ article.create_time }}</i></span>
                    <span><i class="iconfont icon-label_fill"></i>标签
                        <i v-for="item in article.lables">{{ item }}</i>
                    </span>
                </h1>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
let props = defineProps({
    article: {
        type: Object,
        default: () => ({})
    }
})
</script>

<style lang="scss" scoped>
.icon-arrowright {
    font-size: $font-size-m;
}

.icon-icon .icon-icon- {
    font-size: $font-size-s !important;
}

.article-item {
    display: flex;
    flex-direction: column;
    height: 200px;
    width: 100%;
    margin: 10px 0;
    border-radius: 15px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    @include userTheme {
        background-color: getThemeValue("articleItemColor");
    }
    transition: all 0.3s;
    &:hover{
        transform: translateY(-3px);
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    }

    .top-left-img {
        height: 50%;
        width: 100%;
        overflow: hidden;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;

        img {
            border-top-right-radius: 15px;
            border-top-left-radius: 15px;
            z-index: 99;

            &:hover {
                filter: saturate(2) drop-shadow(0 0 5px rgba(0, 0, 0, .66));
                transform: scale(1.1);
            }

            transition: all .3s ease-in-out;
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }

    .conttent {
        cursor: pointer;

        @include userTheme {
            font-family: getThemeValue("fontfamily");
        }

        .content-top {
            padding-left: 10px;
            margin-top: 8px;

            span {
                margin-left: 8px;
                font-size: 12px;
                color: rgba(114, 114, 114, 0.763);
            }

        }

        .main-content-text {
            .title {
                margin-top: 5px;
                @include text-Onerow;
                font-size: $font-size-l;
                padding-left: 25px;
            }

            .describtion {
                margin-top: 8px;
                padding-left: 20px;
                font-size: $font-size-m;
                @include text-Onerow;
            }
        }
    }

}


@media screen and (max-width: 650px) {
    .conttent {
        padding: 20px !important;
        width: 60% !important;

        .describtion {
            display: -webkit-box !important;
            -webkit-line-clamp: 3 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            white-space: normal !important;
            word-wrap: break-word !important;
            word-break: break-all !important;

        }
    }

    .article-item {
        flex-direction: row !important;

        .top-left-img {
            border-top-right-radius: 0px !important;
            border-top-left-radius: 15px !important;

            img {
                border-bottom-left-radius: 15px !important;
                border-top-left-radius: 15px !important;
                border-top-right-radius: 0px !important;
                border-top-left-radius: 0px !important;
            }

            height: 100% !important;
            width: 40% !important;
        }
    }
}</style>